<template>
  <div class="yblogin-page" @keyup.enter="login('ruleForm')">
    <div class="left">医保线上药房平台入驻</div>
    <div class="content">
      <div class="right" style="position:relative">
        <div v-if="!isQRCode" class="demo-ruleForm login-container">
          <el-tabs v-model="activeName" stretch>
            <el-tab-pane label="用户名登陆" name="first">
              <el-form
                      :model="ruleForm"
                      :rules="rules"
                      ref="ruleForm"
                      label-position="left"
                      label-width="0px"
              >
                <el-form-item prop="account">
                  <el-input
                          placeholder="请输入用户名或手机号"
                          v-model="ruleForm.account"
                          @input="isCanTap"
                          @focus="accountChange()"
                          @blur="accountChange2()"
                  >
                    <div class="prefixIcon" slot="prefix">
                      <img
                              class="icondiv"
                              :src="require(`../../public/static/img/${app}/${!this.accountFlag ?  'icon_user':'icon_user_selected'}.png`)"
                      />
                      <div :class="!accountFlag?'line':'blueLine'">|</div>
                    </div>
                  </el-input>
                </el-form-item>
                <el-form-item prop="password" style="margin-top:30px;">
                  <el-input
                          type="password"
                          v-model="ruleForm.password"
                          auto-complete="off"
                          placeholder="请输入密码"
                          @input="isCanTap"
                          @focus="passwordChange()"
                          @blur="passwordChange2()"
                  >
                    <div class="prefixIcon" slot="prefix">
                      <img
                              class="icondiv"
                              :src="require(`../../public/static/img/${app}/${!this.passwordFlag ?  'icon_pwd':'icon_pwd_seleted'}.png`)"
                      />
                      <div :class="!passwordFlag?'line':'blueLine'">|</div>
                    </div>
                  </el-input>
                </el-form-item>
                <div class="checkdiv">
                  <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
                  <div class="remberPass">忘记密码？</div>
                </div>
                <div class="login">
                  <el-form-item style="width:55%;">
                    <el-button
                            type="primary"
                            :class="isCan ? 'mbtn btn' : 'btn'"
                            style="width:100%;"
                            @click.native.prevent="login('ruleForm')"
                    >立即登录</el-button>
                  </el-form-item>
                </div>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="注册" name="second">
              <el-form
                      :model="ruleForm"
                      :rules="rule"
                      ref="ruleForm1"
                      label-position="left"
                      label-width="0px"
              >
                <div>
                  <el-form-item prop="username">
                    <el-input
                            placeholder="请输入用户名"
                            v-model="ruleForm.username"
                            @input="isCanTap"
                            @focus="usernameChange()"
                            @blur="usernameChange2()"
                    >
                      <div class="prefixIcon" slot="prefix">
                        <img
                                class="icondiv"
                                :src="require(`../../public/static/img/${app}/${!this.usernameFlag ?  'icon_user':'icon_user_selected'}.png`)"
                        />
                        <div :class="!usernameFlag?'line':'blueLine'">|</div>
                      </div>
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="phone">
                    <el-input
                            placeholder="请输入手机号码"
                            v-model="ruleForm.phone"
                            @input="isCanTap"
                            @focus="phoneChange()"
                            @blur="phoneChange2()"
                    >
                      <div class="prefixIcon" slot="prefix">
                        <img
                                class="icondiv"
                                :src="require(`../../public/static/img/${app}/${!this.phoneFlag ?  'icon_user':'icon_user_selected'}.png`)"
                        />
                        <div :class="!phoneFlag?'line':'blueLine'">|</div>
                      </div>
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="code">
                    <el-input
                            placeholder="请输入验证码"
                            v-model="ruleForm.code"
                            @input="isCanTap"
                            @focus="codeChange()"
                            @blur="codeChange2()"
                    >
                      <div class="prefixIcon" slot="prefix">
                        <img
                                class="icondiv"
                                :src="require(`../../public/static/img/${app}/${!this.codeFlag ?  'safe':'safe_selected'}.png`)"
                        />
                        <div :class="!codeFlag?'line':'blueLine'">|</div>
                      </div>
                      <div
                              class="getCode main-text-color d-inline-block ml-4 pointer"
                              style="user-select:none"
                              slot="suffix"
                              @click="getCode"
                      >{{flag ? second+'S' : codeText}}</div>
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="checkPass" style="margin-top:30px;">
                    <el-input
                            type="password"
                            v-model="ruleForm.checkPass"
                            maxlength="16"
                            auto-complete="off"
                            placeholder="请设置密码(6-16位数字与字母结合)"
                            @input="isCanTap"
                            @focus="checkPassChange()"
                            @blur="checkPassChange2()"
                    >
                      <div class="prefixIcon" slot="prefix">
                        <img
                                class="icondiv"
                                :src="require(`../../public/static/img/${app}/${!this.passwordFlag ?  'icon_pwd':'icon_pwd_seleted'}.png`)"
                        />
                        <div :class="!passwordFlag?'line':'blueLine'">|</div>
                      </div>
                    </el-input>
                  </el-form-item>
                </div>
                <div class="checkdiv">
                  <el-checkbox v-model="isAgree" class="remember" @change="isCanTap">
                    同意线上药房
                    <span
                            style="color:#ffc330;"
                            class="pointer"
                            @click="dialogVisible = true"
                    >《入驻协议》</span>
                  </el-checkbox>
                </div>
                <div class="resigter">
                  <el-form-item style="width:55%;">
                    <el-button
                            type="primary"
                            :class="isCan ? 'mbtn btn' : 'btn'"
                            style="width:100%;"
                            @click.native.prevent="register('ruleForm1')"
                    >注册</el-button>
                  </el-form-item>
                </div>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <el-dialog title="入驻协议" :visible.sync="dialogVisible" width="40%">
      入驻协议详细内容
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        props: {
            type: {
                dtype: String,
                default: ""
            }
        },
        data() {
            const accountRule = (rule, value, callBack) => {
                if (!this.ruleForm.account) {
                    return callBack(new Error("请输入用户名或手机号"));
                } else {
                    callBack();
                }
            };
            const usernameRule = (rule, value, callBack) => {
                if (!this.ruleForm.username) {
                    return callBack(new Error("请输入用户名"));
                } else {
                    callBack();
                }
            };
            const phoneRule = (rule, value, callBack) => {
                if (!this.isLogin) {
                    if (!this.ruleForm.phone) {
                        return callBack(new Error("请输入手机号码"));
                    } else {
                        callBack();
                    }
                } else {
                    callBack();
                }
            };
            const codeRule = (rule, value, callBack) => {
                if (!this.isLogin) {
                    if (!this.ruleForm.code) {
                        return callBack(new Error("请输入验证码"));
                    } else {
                        this.post(
                            "/common/checkCode",
                            { phone: this.ruleForm.phone, code: this.ruleForm.code },
                            res => {
                                if (res.code && res.code == 200) {
                                    return callBack();
                                } else {
                                    return callBack(new Error("验证码输入错误"));
                                }
                            }
                        );
                    }
                } else {
                    callBack();
                }
            };
            const checkphone = (rule, val, callback) => {
                if (val == "") {
                    callback(new Error("请输入手机号"));
                } else if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
                    callback(new Error("请输入正确的手机号!"));
                } else {
                    callback();
                }
            };
            const checkPass = (rule, val, callback) => {
                if (val == "") {
                    callback(new Error("请输入密码"));
                // } else if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}$/.test(val)) {
                //     callback(
                //         new Error("密码须包含数字、字母两种元素，且密码位数为6-16位!")
                //     );
                // } 
                }else {
                    callback();
                }
            };
            return {
                accountFlag: false,
                passwordFlag: false,
                usernameFlag: false,
                phoneFlag:false,
                codeFlag:false,
                activeName: "first",
                isLogin: true,
                logining: false,
                isQRCode: false,
                isScan: false,
                isWebSocket: true,
                QRCodeDesc: "打开微信, 扫码登陆",
                ruleForm: {
                    account: "",
                    checkPass: "",
                    username: "",
                    password:''
                },
                rule: {
                    checkPass: [{ validator: checkPass, trigger: "blur" }],
                    username: [{ validator: usernameRule, trigger: "blur" }],
                    phone: [{ validator: checkphone, trigger: "blur" }],
                    code: [{ validator: codeRule, trigger: "blur" }]
                },
                rules: {
                    account: [{ validator: accountRule, trigger: "blur" }],
                    password: [{ required: true, message: '请填写密码', trigger: 'blur' },]
                },
                checked: true,
                isAgree: false,
                codeText: "获取验证码",
                flag: false,
                second: 60,
                dialogVisible: false,
                isCan: false
            };
        },
        methods: {
            accountChange() {
                this.accountFlag = true;
            },
            accountChange2() {
                this.accountFlag = false;
            },
            codeChange() {
                this.codeFlag = true;
            },
            codeChange2() {
                this.codeFlag = false;
            },
            checkPassChange() {
                this.passwordFlag = true;
            },
            checkPassChange2() {
                this.passwordFlag = false;
            },
            passwordChange() {
                this.passwordFlag = true;
            },
            passwordChange2() {
                this.passwordFlag = false;
            },
            usernameChange() {
                this.usernameFlag = true;
            },
            usernameChange2() {
                this.usernameFlag = false;
            },
            phoneChange() {
                this.phoneFlag = true;
            },
            phoneChange2() {
                this.phoneFlag = false;
            },
            toDesc(item) {
                this.$parent.setCurWbData(item, 2);
            },
            switchoverLogin() {
                this.isQRCode = !this.isQRCode;
                this.$forceUpdate();
            },
            changeLogin() {
                this.isLogin = !this.isLogin;
                this.$forceUpdate();
            },
            getCode() {
                if (!this.ruleForm.phone) return this.$message.error("请输入手机号");
                if (!/^1[3456789]\d{9}$/.test(this.ruleForm.phone)) {
                    return this.$message.error("手机号输入有误!");
                }
                if (!this.flag) {
                    this.post("/common/getCode", { phone: this.ruleForm.phone }, res => {
                        if (res.code == 200) {
                            this.$message.success("验证码已发送");
                        }
                        this.flag = true;
                        this.timer = setInterval(() => {
                            this.second = this.second - 1;
                            if (this.second == -1) {
                                clearInterval(this.timer);
                                this.codeText = "重新获取";
                                this.flag = false;
                                this.second = 60;
                            }
                        }, 1000);
                    });
                }
            },
            register(formName) {
                this.$refs[formName].validate(valid => {
                    //注册
                    if (!this.isAgree) return this.$message.error("请仔细阅读入驻协议!");
                    const param = {
                        userName: this.ruleForm.username,
                        phone: this.ruleForm.phone,
                        password: this.ruleForm.checkPass
                    };
                    this.post("/register", param, res => {
                        if (res.code && res.code == 200) {
                            this.$message.success("注册成功，请登录");
                            this.activeName = "first";
                        }
                    });
                });
            },
            login(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {                    
                        //登陆
                        let formData = new FormData();
                        formData.append("username", this.ruleForm.account);
                        formData.append("password", this.ruleForm.password);
                        this.post("/auth/login", formData, res => {
                            if (res) {
                                if (this.checked) {
                                    sessionStorage.setItem("username", this.ruleForm.account);
                                    sessionStorage.setItem("password", this.ruleForm.password);
                                }
                                if (!res.data.token) {
                                    this.$message.error('账号密码不一致')
                                    return;
                                }
                                sessionStorage.setItem("userId", res.data.userDetails.id);
                                sessionStorage.setItem("sessionId", res.data.token);
                                sessionStorage.setItem(
                                    "role",
                                    res.data.userDetails.authorities[0].authority
                                );
                                sessionStorage.setItem(
                                    "roleId",
                                    res.data.userDetails.roles[0].id
                                );
                                this.$router.push("/home");
                                //this.$message.success('登陆成功')
                            }
                        });
                    } else {
                    }
                });
            },
            isCanTap() {
                //是否可点击按钮
                if (this.activeName == "first") {
                    if (this.ruleForm.account && this.ruleForm.checkPass) {
                        this.isCan = true;
                    } else {
                        this.isCan = false;
                    }
                } else {
                    if (
                        this.ruleForm.phone &&
                        this.ruleForm.checkPass &&
                        this.ruleForm.code &&
                        this.isAgree
                    ) {
                        this.isCan = true;
                    } else {
                        this.isCan = false;
                    }
                }
            },
        },
        created() {
            if (sessionStorage.getItem("username")) {
                this.ruleForm.account = sessionStorage.getItem("username");
                this.ruleForm.checkPass = sessionStorage.getItem("password");
                sessionStorage.clear();
                localStorage.clear();
            }
        }
    };
</script>

<style lang="less" scoped>
  @mainColor: #2c92e7;
  .yblogin-page {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: url(../../public/static/img/yuanbao/bgc.png) no-repeat left center;
    text-align: center;
    background-size: 100% 100%;
    .left {
      position: absolute;
      top: 20%;
      left: 18%;
      font-size: 24px;
      color: #3485dd;
      letter-spacing: 2px;
    }
    .content {
      position: absolute;
      top: 50%;
      left: 70%;
      transform: translate(-50%, -50%);
      width: 32%;
      height: 52%;
      .right {
        position: absolute;
        height: 100%;
        background: #fff;
        border-radius: 5px;
        padding: 30px 0 15px;
        //   box-shadow: 0 0 25px #cac6c6;
        width: 90%;
        margin: 0 auto;
        .prefixIcon {
          display: flex;
          justify-content: space-around;
          .line {
            margin-right: 5px;
          }
          .blueLine {
            color: @mainColor;
          }
        }
        .login-container {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 80%;
          padding: 0px 35px 15px 35px;
          .icondiv {
            width: 15px;
            height: 15px;
            margin: 12px 10px;
          }
          .title {
            letter-spacing: 5px;
            margin: 0px auto 15px auto;
            font-weight: bold;
            font-size: 34px;
            padding: 5px 0;
            text-align: center;
            color: @mainColor;
            background-image: linear-gradient(rgb(51, 201, 247), #3485dd);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
          .remember {
            margin: 0px 0px 35px 0px;
          }
          /deep/ .el-form-item__content {
            text-align: left;
          }
        }
        /deep/.el-input__inner {
          outline: 0;
          border: 0;
          border-bottom: 1px #ccc solid;
          border-radius: 5px;
          padding-left: 55px;
          background-color: #fff;
          &:focus {
            border-bottom: 1px #3485dd solid;
          }
        }
        /deep/ input:-internal-autofill-selected {
          background-color: #fff !important;
        }
        /deep/.el-tabs__item {
          font-size: 22px;
          height: 50px;
        }
        /deep/.el-tabs__nav {
          display: flex;
          justify-content: space-around;
        }
        /deep/.el-input {
          background-color: #fff;
        }
        .checkdiv {
          display: flex;
          justify-content: space-between;
          text-align: left;
          /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
            color: #87878d;
          }
          /deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
          .el-checkbox__input.is-indeterminate .el-checkbox__inner {
            background-color: #4b4e55;
            border-color: #4b4e55;
          }
          .remberPass {
            color: #87878d;
            font-size: 14px;
            cursor: pointer;
            &:hover {
              color: #0882f4;
            }
          }
        }
        .btn {
          border: none;
          border-radius: 30px;
          border-color: #a0cfff;
        }
        .btn.mbtn {
          background-color: #409eff;
          border-color: #409eff;
        }
      }
      .getCode{
        border: 1px solid @mainColor;
        border-radius: 20px;
        height: 24px;
        padding: 0 10px;
        line-height: 24px;
        font-size: 12px;
      }
    }
  }
  /deep/.el-tabs__nav-wrap {
    overflow: visible;
  }
  /deep/.el-tabs__nav-scroll {
    margin-bottom: 40px;
  }
  .login,
  .resigter {
    margin-top: 30px;
    display: flex;
    justify-content: space-around;
    /deep/.el-button {
      line-height: 1.5;
      background-color: #409eff;
    }
  }
</style>
